/**
  * Combine 2
  *
  * @author jh3y - jheytompkins.com
*/
$size: 30px;
$duration: 2s;
$color: var(--primary);

@keyframes combine-two {
  25% {
    transform: translate(0, -100%);
  }
  50% {
    transform: translate(0, 50%);
  }
  75% {
    transform: translate(0, 150%);
  }
}

.combine-two {
  height: $size;
  position: relative;
  width: $size;

  div {
    --rotation: 45;
    position: absolute;
    transform: rotate(calc(var(--rotation) * 1deg));

    &:after {
      animation: combine-two 1.5s infinite ease;
      border: ($size / 2) solid transparent;
      border-top-color: $color;
      content: '';
      display: block;
      height: $size;
      width: $size;
    }

    &:nth-child(2) {
      --rotation: 135;
    }

    &:nth-child(3) {
      --rotation: 225;
    }

    &:nth-child(4) {
      --rotation: 315;
    }

  }
}
